<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            border: 2px solid #000;
        }
    </style>
</head>
<body>
    <div id="box" class="box" title="hello">
        <!-- <ul>
            <li>1</li>
        </ul>
        <h1>最后的元素</h1> -->
    </div>
    <script>
        // DOM
        // document.getElementById 获取页面中的标签，就是DOM节点，是一个对象
        var box = document.getElementById('box')
        setInterval(function(){
            var now = new Date();
            var h = now.getHours()
            var m = now.getMinutes()
            var s = now.getSeconds()

            box.innerHTML = h+':'+m+':'+s
        },1000)

        // var box2 = document.getElementsByClassName('box')
        // console.log(box2[0])

        // console.dir(box)
        // console.log(box.id)
        // console.log(box.parentNode)
        // console.log(box.firstChild)
        // console.log(box.firstElementChild)
        // console.log(box.lastElementChild)
        
        // box.onclick = function(){
        //     // box.lastElementChild.style.color = '#f00'
        //     box.lastElementChild.style.display = 'none'
        // }

        // var id = setInterval(function(){
        //     var date = new Date();
        //     document.write(date.getSeconds());
        // },1000)

        // setTimeout(function(){
        //     clearInterval(id)
        // },5000)

        // setTimeout(function(){
        //     document.write('想多了')
        // },3000)
        // var timerId = setTimeout(function(){
        //     document.write('hello')
        // },4000)

        // clearTimeout(timerId)


        // window是最顶层的对象
        // alert('hello')
        
        // var res = confirm('大家想放假吗');
        // if(res){
        //     document.write('想多了')
        // }else{
        //     document.write('很好，接着学习')
        // }

        // var res = prompt('请输入评价','很好')
        // if(res){
        //     document.write(res)
        // }
    </script>
</body>
</html>